<template>
  <div class="income-page">
    <div class="statistics">
      <n-tabs default-value="收益情况" type="line">
        <n-tab-pane name="收益情况" tab="收益情况"></n-tab-pane>
      </n-tabs>
      <div class="row flex">
        <div class="price-card">
          <div class="prices">
            <span>0</span>
            <span>元</span>
          </div>
          <div class="desc">累计收益0元</div>
          <div class="btns">
            <n-button
              class="btn"
              type="primary"
              ghost
              round
              @click="handExchange"
            >
              兑换软妹币
            </n-button>
            <n-button class="btn" type="primary" round @click="handPayouts">
              提现
            </n-button>
          </div>
        </div>
        <div class="earnings-card">
          <div class="nav">收益情况</div>
          <div class="grid flex align-center">
            <div class="grid-item">
              <div class="num">
                <span>+</span>
                <span>{{ state.yesterday }}</span>
              </div>
              <div class="label">昨日收益</div>
            </div>
            <div class="grid-item">
              <div class="num">
                <span>+</span>
                <span>{{ state.week }}</span>
              </div>
              <div class="label">本周收益</div>
            </div>
            <div class="grid-item">
              <div class="num">
                <span>+</span>
                <span>{{ state.month }}</span>
              </div>
              <div class="label">本月收益</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="details">
      <n-tabs default-value="收益明细" type="line">
        <n-tab-pane name="收益明细" tab="收益明细">
          <earnings-table />
        </n-tab-pane>
        <n-tab-pane name="提现明细" tab="提现明细">
          <payouts-table />
        </n-tab-pane>
        <n-tab-pane name="兑换明细" tab="兑换明细">
          <exchange-table />
        </n-tab-pane>
        <n-tab-pane name="奖励明细" tab="奖励明细">
          <reward-table />
        </n-tab-pane>
      </n-tabs>
    </div>
    <exchange-dia ref="exchangeRef" />
  </div>
</template>
<script setup lang="ts" name="UseriIcome">
import { NTabPane, NTabs, NButton } from 'naive-ui'
import EarningsTable from '@/views/my/page/income/view/EarningsTable.vue'
import PayoutsTable from '@/views/my/page/income/view/PayoutsTable.vue'
import ExchangeTable from '@/views/my/page/income/view/ExchangeTable.vue'
import RewardTable from '@/views/my/page/income/view/RewardTable.vue'
import { useRouter } from 'vue-router'
import { defineAsyncComponent, reactive, ref } from 'vue'
const ExchangeDia = defineAsyncComponent(
  () => import('./components/ExchangeDia.vue')
)
const router: any = useRouter()
const handPayouts = () => {
  router.push('/my/payouts')
}
const exchangeRef = ref()
const handExchange = () => {
  exchangeRef.value.open()
}

const state = reactive({
  totalEarnings: 0,
  yesterday: 0,
  month: 0,
  week: 0
})
</script>

<style scoped lang="scss">
.income-page {
  .statistics {
    background: #fff;
    border-radius: 12px;
    border: 1px solid #eeeeee;
    box-sizing: border-box;
    padding: 15px 95px 56px 24px;
    .row {
      margin-top: 36px;
      .price-card {
        width: 350px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        position: relative;
        &:before {
          content: '';
          position: absolute;
          top: 0;
          right: 0;
          width: 0;
          height: 100%;
          border: 1px solid #eeeeee;
        }
        .prices {
          span {
            font-size: 32px;
            font-family: HONOR Sans, HONOR Sans;
            font-weight: 600;
            color: #333333;
            &:last-child {
              font-size: 14px;
              font-family: PingFang SC, PingFang SC;
              font-weight: 400;
              color: #333333;
            }
          }
        }
        .desc {
          margin-top: 8px;
          font-size: 14px;
          font-family: PingFang SC, PingFang SC;
          font-weight: 400;
          color: #999999;
        }
        .btns {
          margin-top: 28px;
          display: flex;
          align-items: center;
          gap: 0 12px;
          .btn {
            width: 106px;
            height: 38px;
            line-height: 38px;
            font-size: 14px;
            font-family: PingFang SC, PingFang SC;
            font-weight: 400;
          }
        }
      }
      .earnings-card {
        flex: 1;
        margin-left: 22px;
        .nav {
          font-size: 14px;
          font-family: PingFang SC, PingFang SC;
          font-weight: bold;
          color: #333333;
        }
        .grid {
          justify-content: space-between;
          margin-top: 40px;
          padding-left: 24px;
          &-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            .num {
              span {
                font-size: 24px;
                font-family: HONOR Sans, HONOR Sans;
                font-weight: 600;
                color: #333333;
                &:first-child {
                  font-size: 18px;
                }
              }
            }
            .label {
              margin-top: 12px;
              font-size: 14px;
              font-family: PingFang SC, PingFang SC;
              font-weight: 400;
              color: #999999;
            }
          }
        }
      }
    }
  }
  .details {
    min-height: 790px;
    background: #fff;
    border-radius: 12px;
    border: 1px solid #eeeeee;
    box-sizing: border-box;
    padding: 15px 24px;
    margin-top: 15px;
  }
}
</style>
